<template>
  <a-form
    :model="formState"
    name="basic"
    :label-col="{ style: { width: '78px' } }"
    :wrapper-col="{ style: { width: 'auto' } }"
    autocomplete="off"
    ref="refForm"
  >
    <a-form-item label="类型" name="type" :rules="[{ required: true, message: '请选择类型' }]">
      <a-select placeholder="请选择类型" v-model:value="formState.type">
        <a-select-option value="menu">菜单</a-select-option>
        <a-select-option value="button">按钮</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="父级" name="parentId">
      <a-tree-select
        :getPopupContainer="(triggerNode: Element) => triggerNode.parentNode"
        v-model:value="formState.parentId"
        show-search
        style="width: 100%"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        placeholder="请选择父级菜单"
        allow-clear
        :fieldNames="{ children: 'children', label: 'name', value: 'id' }"
        tree-default-expand-all
        :tree-data="parentOptions"
        tree-node-filter-prop="name"
      >
      </a-tree-select>
    </a-form-item>
    <a-form-item label="名称" name="name" :rules="[{ required: true, message: '请输入名称' }]">
      <a-input v-model:value="formState.name" placeholder="请输入名称" />
    </a-form-item>
    <a-form-item
      v-if="formState.type === 'button'"
      label="code"
      name="code"
      :rules="[{ required: true, message: '请输入code' }]"
    >
      <a-input v-model:value="formState.code" placeholder="请输入code" />
    </a-form-item>
    <template v-if="formState.type === 'menu'">
      <a-form-item
        label="路由地址"
        name="path"
        :rules="[{ required: true, message: '请输入路由地址' }]"
      >
        <a-input v-model:value="formState.path" placeholder="请输入路由地址" />
      </a-form-item>

      <a-form-item
        label="页面组件"
        name="component"
        :rules="[{ required: true, message: '请输页面组件路径' }]"
      >
        <a-input v-model:value="formState.component" placeholder="请输页面组件路径" />
      </a-form-item>
    </template>

    <a-form-item label="描述" name="explain">
      <a-textarea v-model:value="formState.explain"></a-textarea>
    </a-form-item>
  </a-form>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { type CreateMenuDto, getTypeMenuListApi, type MenuDto } from '@/api/menu.api.ts'

const formState = ref<CreateMenuDto>({
  name: '',
  path: '',
  component: '',
  type: 'menu',
  icon: '',
  code: '',
  explain: '',
  // 如果设置父级菜单，则传入 parentId；不传则默认为一级菜单
})

const refForm = ref()
const submit = () => {
  return refForm.value.validateFields().then(() => {
    return formState.value
  })
}
const clearFormState = () => {
  getParentOptions()
  formState.value.id = undefined
  formState.value.parentId = undefined
  return refForm.value.resetFields()
}

const setFormState = (record: CreateMenuDto) => {
  getParentOptions()
  formState.value = record
}

function markDisabled(node: MenuDto): void {
  node.disabled = true
  if (node.children && node.children.length > 0) {
    node.children.forEach((child) => markDisabled(child))
  }
}

function disableTreeNodeById(tree: MenuDto[], targetId?: number | string): void {
  for (const node of tree) {
    if (node.id === targetId) {
      // 找到目标节点，递归标记该节点及其所有子节点
      markDisabled(node)
    } else if (node.children && node.children.length > 0) {
      // 递归查找子树
      disableTreeNodeById(node.children, targetId)
    }
  }
}

const parentOptions = ref<MenuDto[]>([])
const getParentOptions = () => {
  getTypeMenuListApi().then((res: MenuDto[]) => {
    disableTreeNodeById(res, formState.value.id)
    parentOptions.value = res
  })
}

defineExpose({
  submit,
  clearFormState,
  setFormState,
})

defineOptions({
  name: 'RoleEditForm',
})
</script>
